// 根组件
import React, { Component } from "react";
// 引入antd组件
import { Carousel,Tabs ,message } from 'antd';
// css文件
import "@/assets/css/Home.css";

// antd轮播图样式
const contentStyle = {
  height: '402px',
  color: '#fff',
  textAlign: 'center',
  background: '#364d79',
};
// antd tab样式
const { TabPane } = Tabs;

class Home extends Component {
    render() {
        return (
			<div className="background">
				<div className="Heart">
					<div className="swap">
						{/*顶部导航*/}
						<div className="Header">
							<ul className="navList">
							<li title="首页" onClick={(e)=>this.toHome(e)}>
								<dl>
									<dt>首页</dt>
									<dd>Home</dd>
								</dl>
							</li>
							<li title="论坛" onClick={(e)=>this.toChat(e)}>
								<dl>
									<dt>论坛</dt>
									<dd>Chat</dd>
								</dl>
							</li>
							<li title="商城" onClick={(e)=>this.toShopping(e)}>
								<dl>
									<dt>商城</dt>
									<dd>Shopping</dd>
								</dl>
							</li>
							<li title="登录" onClick={(e)=>this.toLogin(e)}>
								<dl>
									<dt className="loginSearch">(未登录)</dt>
									<dd>Login</dd>
								</dl>
							</li>
							<li  className="loginCancel" onClick={(e)=>this.Cancel(e)}>
								<dl>
									<dt>注销</dt>
									<dd>Cancel</dd>
								</dl>
							</li>
						</ul>
						
						</div>
						{/*补丁空白*/}
						<div className="patch1"></div>
						{/*选项条*/}
						<div className="show">
							<div className="chooseTab">
								<a href="https://cf.qq.com/web201105/download.shtml">
									<span></span><span></span><em>下载游戏</em>
								</a>
								<a href="https://cf.qq.com/web201105/actions.shtml">
									<span></span><br/><em>活动中心</em>
								</a>
								<a href="https://cf.qq.com/live/">
									<span></span><br/><em>直播中心</em>
								</a>
								<a href="https://cf.qq.com/web201105/game.shtml">
									<span></span><br/><em>电竞专区</em>
								</a>
								<a href="https://cf.qq.com/comm-htdocs/pay/new_index.htm?t=cf">
									<span></span><br/><em>账户充值</em>
								</a>
								<a href="https://cf.qq.com/act/5381/a20210401fuli/index.html?e_code=517474">
									<span></span><br/><em>掌火专属</em>
								</a>
								<a href="https://cf.qq.com/guide/">
									<span></span><br/><em>攻略中心</em>
								</a>
								<a href=" https://cf.qq.com/cp/a20210423yzfs/index.html">
									<span></span><em>一战封神</em>
								</a>
							</div>
							<div className="infoDisplay">
								{/*轮播图*/}
								<div className="videoShow">
									<Carousel autoplay>
									    <div>
									      <h3 style={contentStyle}>
											<img src="//ossweb-img.qq.com/upload/adw/image/13/20210528/4459004ebc0c2efe649b259e7c3e58f2.jpeg" alt="轮播图"/>
										  </h3>
									    </div>
									    <div>
									      <h3 style={contentStyle}>
											<img src="//ossweb-img.qq.com/upload/adw/image/13/20210601/ea30d473029bc03d28f6efbb5895f344.jpeg" alt="轮播图"/>
										  </h3>
									    </div>
									    <div>
									      <h3 style={contentStyle}>
											<img src="//ossweb-img.qq.com/upload/adw/image/13/20210601/a56e3f0969468ab5b6d0c37a8b4b9daf.jpeg" alt="轮播图"/>
										  </h3>
									    </div>
									    <div>
									      <h3 style={contentStyle}>
											<img src="//ossweb-img.qq.com/upload/adw/image/13/20210430/5d8e616674fb33024a9568c0b9fa4e87.jpeg" alt="轮播图"/>
										  </h3>
									    </div>
										<div>
										  <h3 style={contentStyle}>
											<img src="//ossweb-img.qq.com/upload/adw/image/13/20210531/b532ee24320f31e5e886fe5886a99308.jpeg" alt="轮播图"/>
										  </h3>
										</div>
										<div>
										  <h3 style={contentStyle}>
											<img src="//ossweb-img.qq.com/upload/adw/image/13/20210531/d49ea3fdc84f786edc2944fb6540b53c.jpeg" alt="轮播图"/>
										  </h3>
										</div>
									  </Carousel>
								</div>
								{/*tab选项卡 信息展示*/}
								<div className="selectSwitch">
									  <Tabs defaultActiveKey="1" centered size="large">
									    <TabPane tab="综合" key="1">
											<h3>6月1日穿越火线游戏安全处罚公示</h3>
											<h4>穿越火线直播后援团纳新公告</h4>
											<h4>节日预热专场来袭豪礼直接免费抽取</h4>
											<h4>关于64位版本更新后掉帧的说明</h4>
											<h4>必中极品永久</h4>
									    </TabPane>
									    <TabPane tab="公告" key="2">
									      <h3>6月1日穿越火线游戏安全处罚公示</h3>
										 <h4>关于CF登录器重置分辨率BUG的公告说明</h4>
										 <h4>5月64位版本更新公告</h4>
										 <h4>关于64位版本更新后掉帧的说明</h4>
										 <h4>众多顶级核心道具豪礼直接免费抽取！</h4>
									    </TabPane>
									    <TabPane tab="赛事" key="3">
									     <h3>港口成强图，XROCK战队港口为何连克KZ、白鲨？</h3>
										<h4>战报：XROCK虽败犹荣</h4>
										<h4>46回头反杀对手，潇潇极限收割</h4>
										<h4>46残局秀起来，XROCK以10-2战胜BS</h4>
										<h4>6.1火线游园会 梦回童年！</h4>
									    </TabPane>
									  </Tabs>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		);
    };
	
	// 方法区域
		// 跳转首页
		toHome=()=>{
			this.props.history.push("/home");
		}
		// 跳转登录
		toLogin=()=>{
			if(localStorage.getItem("token")){
				message.warn("已有帐号登录！请先注销！")
			}else{
				this.props.history.push("/login");
			}
		}
		// 跳转社区
		toChat=()=>{
			this.props.history.push("/chat");
			document.location.reload();
		}
		// 跳转商城
		toShopping=()=>{
			this.props.history.push("/shopping");
			document.location.reload();
		}
		// 退出登录
		Cancel=()=>{
			// 如果有token
			if(localStorage.getItem("token")){
				// 删除token username
				localStorage.removeItem('token');
				localStorage.removeItem('username');
				// 重新加载本页面
				document.location.reload();
			}
		}
		
	// 生命周期
	componentDidMount(){
		// 获取轮播图底部按钮对象
		let buttonList = document.querySelectorAll(".slick-dots button");
		// 按钮显示字样改变
		buttonList[0].innerHTML="5月第五周";
		buttonList[1].innerHTML="超级特卖会";
		buttonList[2].innerHTML="6月人拉人";
		buttonList[3].innerHTML="5月自助餐";
		buttonList[4].innerHTML="618雷蛇狂欢";
		buttonList[5].innerHTML="CFHD预创角";
		
		// 查看是否已经登录
		if(localStorage.getItem("token")){
			// 修改登录状态
			document.querySelector(".loginSearch").innerHTML="(已登陆)";
			document.querySelector(".loginSearch").style.color="green";
			
		}else{
			document.querySelector(".loginSearch").innerHTML="(未登陆)";
			document.querySelector(".loginSearch").style.color="red";
		}
		// 注销按钮状态
		if(localStorage.getItem("token")){
			// 修改注销按钮状态
			document.querySelector(".loginCancel").style.color="rgba(255,255,255)";
			
		}else{
			document.querySelector(".loginCancel").style.color="rgba(255,255,255,.5)";
		}
		
	}
}

export default Home;